<template>
  <view class="community">
    <template v-if="appConfig.is_open_community">
		<view class="head_sty1">
			
		</view>
     <view class="head_sty" style="">
     	<view class="head_font">
     		滴滴到家为您服务
     	</view>
		<view class="head_font1">
			送货上门,服务到家	
		</view>
		<view class="cut_sty" >
			<view :class= 'cutData ==0? "cut_sty_list" :" cut_sty_right"' style="border-radius: 20rpx 20rpx 20rpx 0rpx;" @click="cutType(0)" >
				商城订单
			</view>
			<view :class= 'cutData ==1? "cut_sty_list" :" cut_sty_right"'  @click="cutType(1)">
				周边订单
			</view>	
		</view>
		<view class="seaech_sty" >
			<view class="seaech">
				
			</view>
		</view>
		<view class="user-order"v-if="cutData == 0"  >
		    <tabs class="listData"   :current="active" @change="changeShow" bar-width="60" :is-scroll="false">
		        <tab class="listData"  v-for="(item, index) in order" :key="index" :name="item.name">
		            <order-list
		                :order-type="item.type"
		                :i="index"
		                :index="active"
		                v-if="isLogin"
		            ></order-list>
		        </tab>
		    </tabs>
		</view>
		<view class="user-order" v-else >
		    <tabs class="listData"   :current="active" @change="changeShow" bar-width="60" :is-scroll="false">
		        <tab class="listData"  v-for="(item, index) in order1" :key="index" :name="item.name">
		            <order-list1
		                :order-type="item.type"
		                :i="index"
		                :index="active"
		                v-if="isLogin"
						
		            ></order-list1>
		        </tab>
		    </tabs>
		</view>
     </view>
    </template>
    <template v-else>
      <view class="community-empty flex-col col-center row-center">
        <image class="img-null" src="/static/images/follow_null.png"></image>
        <view class="muted mt20">当前页面暂无内容～</view>
      </view>
    </template>
    <tabbar></tabbar>
  </view>
</template>

<script>
import LikeHeader from "./components/like-header.vue";
import Explore from "./components/explore.vue";
import Follow from "./components/follow.vue";
import { orderType } from '@/utils/type'
export default {
  components: {
    LikeHeader,
    Explore,
    Follow,
  },
  data() {
    return {
      currentNav: 1,
      communityShareItem: {},
	  cutData:0,
	  active: -1,
	  order: [
	     
	      {
	          name: '待支付',
	          type: orderType.PAY
	      },
	      {
	          name: '待送货',
	          type: orderType.DELIVERY
	      },
	      {
	          name: '已完成',
	          type: orderType.FINISH
	      },
	      {
	          name: '退换货',
	          type: orderType.CLOSE
	      }
	  ],
	  order1: [
	     
	      {
	          name: '全部订单',
	          type: orderType.PAY
	      },
	      {
	          name: '待送货',
	          type: orderType.DELIVERY
	      },
	      {
	          name: '已完成',
	          type: orderType.FINISH
	      },
	      {
	          name: '待评价',
	          type: orderType.CLOSE
	      }
	  ]
    };
  },
  onUnload() {
    uni.$off("changeItem");
    uni.$off("hasNew");
	const { order } = this
	let type = this.$Route.query.type || orderType.ALL
	let index = order.findIndex((item) => item.type == type)
	this.changeShow(index)
  },
  onShareAppMessage() {
    // const promise = new Promise(resolve => {
    //     setTimeout(() => {
    //         resolve({
    //             title: `${this.communityShareItem.user.nickname}，TA的内容超级棒`,
    //             path: '/bundle_b/pages/community_user/community_user?id=' + this
    //                 .communityShareItem.id,
    //             imageUrl: this.communityShareItem.image
    //         })
    //     }, 10)
    // })
    // return {
    //     title: '自定义转发标题',
    //     path: '/page/user/user',
    //     promise
    // }
    return {
      path: "/pages/community/community",
    };
  },
  methods: {
	  changeShow(index) {
	      if (index != -1) {
	          this.$nextTick(() => {
	              this.active = index
	          })
	      }
	  },
	cutType(e){
		console.log(e)
		this.cutData = e
	},
	  
    handleNav(event) {
      this.currentNav = Number(event);
    },
    // 关注页的分享信息
    handleShare(event) {
      this.communityShareItem = event;
    },
  },
};
</script>

<style lang="scss">
page {
  padding: 0;
}

.community {
  display: flex;
  // height: calc(100vh - var(--window-bottom));
  height: 100vh;
  overflow: hidden;
  flex-direction: column;
  .head_sty1{
	//   width: 100%;
	//   height: 600rpx;
	// background-color: #F9F9F9;
	//   background-image: url(../../static/images/head_img.png);
	//   background-size: 100% 100%;
	//   position: fixed;
	//   z-index:100;
	//   top: 0;
	  
  }
  .head_sty{
	  width: 100%;
	  height: 600rpx;
	  background-color: #F9F9F9;
	  background-image: url(../../static/images/head_img.png);
	  background-size: 100% 100%;
	 position: fixed;
	  z-index: 100;
	  overflow: hidden;
	  
	  .listData{
		  background-color:#F9F9F9 ;
	  }
	  // .user-order /deep/.mescroll-downwarp{
		 //  margin-top: 500rpx;
	  // }
	  .user-order /deep/ .mescroll-uni{
		  height: 50vh;
	  }
	   .user-order /deep/ .mescroll-uni-content {
		   margin-top: 20rpx;
		
		   
	   }
	  .user-order /deep/ .tab-item{
		  background-color: #F9F9F9;
		  // color: #60A5EC;;
		
	  } 
	  .user-order /deep/ .order-list{
	  		//   position: absolute;
			  // top: 500rpx;
			  
	  } 
	  .user-order /deep/ .mescroll-empty{
		  // margin-top: 500rpx;
	
	  }
	  .user-order /deep/ .empty-fixed{
		
	  }
	  
	  // .user-order /deep/.line1 {
	  //   background-color: #166fe8; /* 修改底部横杠的颜色 */
	  //   height: 3px; /* 修改底部横杠的高度 */
	   
	  // }
	 
	  .seaech_sty{
		  width: 100%;
		  height: 80rpx;
		 background-color: #F9F9F9;
		 .seaech{
			 width: 690rpx;
			 margin-left: 30rpx;
			 background-color: #fff;
			 border-radius: 40rpx;
			 height: 80rpx;
		 }
	  }
	.head_font{
		font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
		font-weight: 600;
		font-size: 57rpx;
		line-height: 0rpx;
		text-align: left;
		margin: 152rpx 0 0 20rpx;
		color: #fff;
	}
	.head_font1{
		margin: 44rpx 0 0 20rpx;
		font-size: 32rpx;
		color: #fff;
	}
	
	.cut_sty{
		display: flex;
		width: 100%;
		height:100rpx ;
		margin-top: 89rpx;
		background-color: #F9F9F9;
		.cut_sty_list{
			width: 50%;
			height: 117rpx;
			background: #F9F9F9;
			border-radius: 20rpx  20rpx 0 0;
			text-align: center;
			line-height: 117rpx;
			font-size: 32rpx;
			color: #333333;
			font-weight: bold;
			margin-top: -42rpx;
		}
		.cut_sty_right{
			width: 50%;
			height: 97rpx;
			background: #D2E8FF;
			border-radius:  0 20rpx;
			margin-top: -22rpx;
			text-align: center;
			line-height: 97rpx;
		}
	}
  }

  &-empty {
    height: calc(100vh - var(--window-bottom));
  }

  .container {
    flex: 1;
    min-height: 0;
    overflow: scroll;
  }
}
</style>
